

<template>
  <section class="todoapp">
    <TodoHeader :list="list" @addHandel="addH"></TodoHeader>
    <!-- 子组件向外暴露事件 updateCheckoutedEvent 我们定义一个事件处理函数来响应该事件-->
    <TodoMain 
    :list="list" 
    @updateCheckoutedEvent="hUpdateCheckout" 
    @destroyEvent="destroyHandel"
    @hAllCheckout="hAllCheckout"
    >
  </TodoMain>
    <TodoFooter :list="list"></TodoFooter>
  </section>
</template>
<script setup>
import TodoHeader from './components/TodoHeader.vue'
import TodoMain from './components/TodoMain.vue'
import TodoFooter from './components/TodoFooter.vue'
import { ref ,computed,watch} from 'vue';
// 数据放在父组件里,方面父组件向各个子组件传递数据
/* const list = ref([
  {
    id: 1,
    name: '吃饭',
    done: true,
  },
  {
    id: 2,
    name: '睡觉',
    done: false,
  },
  { 
    id: 3,
    name: '打豆豆',
    done: false,
  },
]) */
const list =ref(JSON.parse(window.localStorage.getItem('toDoList'))||[])
console.log(JSON.parse(window.localStorage.getItem('toDoList')));
// 修改状态的事件处理函数
const hUpdateCheckout = (data)=>{
  // console.log('子暴露事件时传递的参数',data);
  // find遍历数组有符合条件的元素则将其作为返回值结束遍历,找不到返回undifined
  // findIndex遍历数组返回符合条件的元素的下标,找不到返回-1
  const item = list.value.find(item =>item.id===data.id)
  if(item){
    item.done=data.checked
  }
}
// 删除任务的事件处理函数
const destroyHandel = id => {
  const index = list.value.findIndex(item => item.id===id)
  console.log('删除元素的索引值',index);
  if (index!==-1) {
    // splice(index,num,item) 数组遍历方法可用来删除或替换元素 有三个参数
    // index表示从从数组下标第几位开始删除或替换,num表示从index开始要删除或替换几个元素,item表示在原删除位置替换新增的元素,一般用作删除时第三个参数可不写
    list.value.splice(index,1)
  }
}
// 新增任务的事件处理函数
const addH = data => list.value.unshift(data)
// 全选功能实现
const hAllCheckout = chioce =>{
  console.log(chioce);
  list.value.forEach(item=>item.done=chioce)
}
// 数据持久化的实现,用监听事件监听list数组,每当list数组发生改变就存储到本地
watch(list ,
(val)=>{
  window.localStorage.setItem('toDoList',JSON.stringify(val))
  },
  {deep:true})
</script>
<style></style>
